<template>
    <div class="wrapper">
        <header>
            <h3>管理员首页</h3>
        </header>

        <div class="function-region">
            <div class="function-title">
                <i class="fa fa-list"></i>
                <p>功能列表</p>
            </div>
            <ul class="function-list">
                <li>
                    <div class="function-button" @click="goToBusinessManagement">
                        <p>商户管理</p>
                    </div>
                </li>

                <li>
                    <div class="function-button" @click="goToUserManagement">
                        <p>用户管理</p>
                    </div>
                </li>

                <li>
                    <div class="function-button" @click="goToAppealManagement">
                        <p>申诉管理</p>
                    </div>
                </li>

                <li>
                    <div class="function-button" @click="confirmLogout">
                        <p>退出</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
import { useRouter } from 'vue-router'

export default {
    name: 'AdministratorIndex',
    setup() {
        const router = useRouter()

        const goToBusinessManagement = () => router.push('/administratortobusiness')
        const goToUserManagement = () => router.push('/administratortouser')      
        const goToAppealManagement = () => router.push('/administratortoappeal')
        // 退出确认
        const confirmLogout = () => {
            if (confirm('您确定要退出系统吗？')) {
                alert('退出成功')
                router.push('/userIndex')
            }
        }

        // 返回方法，使模板可以访问
        return {
            goToBusinessManagement,
            goToUserManagement,
            goToAppealManagement,
            confirmLogout
        }
    }
}
</script>

<style>
.wrapper {
    width: 100%;
    height: 100%;
}

.wrapper header {
    width: 100%;
    height: 15vw;
    background-color: #0097FF;
    display: flex;
    align-items: center;
    user-select: none;
}

.wrapper header h3{
    font-size: 6vw;
    font-weight: 700;
    color: #FFFFFF;
    margin-left: 2.5vw;
    font-family: inherit; /* 去掉强制字体 */
}

.wrapper .function-region {
    width: 100%;
    margin-top: 2vw;
    background-color: #FFFFFF;
}

.wrapper .function-region .function-title {
    width: 90%;
    height: 7vw;
    margin-left: 5%;
    display: flex;
    align-items: center;
    background-color: #0097FF;
}

.wrapper .function-region .function-title .fa-list {
    font-size: 3vw;
    margin-left: 2vw;
    color: #FFFFFF;
}

.wrapper .function-region .function-title p {
    font-size: 3.5vw;
    color: #FFFFFF;
    margin-left: 1vw;
}

.wrapper .function-region .function-list {
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-top: 3vw;
    background-color: #FFFFFF;
    padding-bottom: 3vw;
}

.wrapper .function-region .function-list li {
    margin-bottom: 3vw;
}

.wrapper .function-region .function-list li .function-button {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    height: 18vw;
    background-color: #DCDCDC;
    border-radius: 2vw;
    transition: all 0.3s ease;
}

.wrapper .function-region .function-list li .function-button:hover {
    background-color: #C8C8C8;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.wrapper .function-region .function-list li .function-button p {
    font-size: 4vw;
}
</style>